<template>
  <!-- 养殖信息 -->
  <div style="margin-bottom: 40px;">
    <div>
      <span style="color: #3791EB;">养殖信息</span>
      <el-button plain style="background-color: #F2F2F2;margin-left: 18px;width: 90px;margin-bottom: 15px;"
        @click="dialogBreed()">设置</el-button>
      <hr>
    </div>
    <div>
      <table>
        <tr>
          <td style="width: 300px;">品种 : {{ AddformBreed.breedVariety }}</td>
          <td>来源 : {{ AddformBreed.breedSource }}</td>
        </tr>
        <tr>
          <td>饲养天数 : {{ AddformBreed.breedDay }}</td>
          <td>饲养品牌 : {{ AddformBreed.breedBrand }}</td>
        </tr>
        <tr>
          <td>饲养负责人 : {{ AddformBreed.breedOPeratorName }}</td>
          <td>出栏日期 :
            {{ AddformBreed.breedCrateTime ? moment(AddformBreed.breedCrateTime).format("yyyy-MM-DD") : "空"
            }}
          </td>
        </tr>
      </table>
    </div>
    <!-- 养殖信息设置弹框 -->
    <div>
      <el-dialog v-model="dialogFormBreed" title="养殖信息" width="500" draggable="true">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="AddformBreed" :rules="rules" label-width="auto"
          class="demo-ruleForm" :size="formSize" status-icon>
          <el-form-item label="品种" prop="breedVariety">
            <el-input v-model="AddformBreed.breedVariety" show-word-limit maxlength="30" />
          </el-form-item>
          <el-form-item label="来源" prop="breedSource">
            <el-input v-model="AddformBreed.breedSource" show-word-limit maxlength="30" />
          </el-form-item>
          <el-form-item label="饲养天数" prop="breedDay">
            <el-input v-model="AddformBreed.breedDay" show-word-limit maxlength="5" />
          </el-form-item>
          <el-form-item label="饲料品牌" prop="breedBrand">
            <el-input v-model="AddformBreed.breedBrand" show-word-limit maxlength="30" />
          </el-form-item>
          <el-form-item label="饲养负责人" prop="breedOPeratorName">
            <el-input v-model="AddformBreed.breedOPeratorName" show-word-limit maxlength="30" />
          </el-form-item>
          <el-form-item label="出栏日期" prop="breedCrateTime">
            <el-date-picker v-model="AddformBreed.breedCrateTime" type="date" placeholder="出栏日期" style="width: 100%" />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
              保存
            </el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
  <!-- 保健信息 -->
  <div style="margin-bottom: 40px;">
    <div>
      <span style="color: #3791EB;">保健信息</span>
      <el-button plain style="background-color: #F2F2F2;margin-left: 18px;width: 90px;margin-bottom: 15px;"
        @click="addRow">新增行</el-button>
      <hr>
    </div>
    <div>
      <div>
        <el-table :data="healthRecords" style="width: 900PX;background-color: #FFFFFF;">
          <el-table-column prop="immunityDay" label="饲养天数">
            <template #default="{ row, $index }">
              <el-input v-if="isUpinpute === $index" v-model="newRecord.immunityDay" clearable type="number" />
            </template>
          </el-table-column>
          <el-table-column prop="immuniTyype" label="保健方式">
            <template #default="{ row, $index }">
              <el-input v-if="isUpinpute === $index" v-model="newRecord.immuniTyype" clearable />
            </template>
          </el-table-column>
          <el-table-column prop="immunityMethod" label="保健方法">
            <template #default="{ row, $index }">
              <el-input v-if="isUpinpute === $index" v-model="newRecord.immunityMethod" clearable />
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row, $index }">
              <el-button v-if="isUpinpute !== $index" link type="primary" size="small" @click="Updates(row, $index)"
                v-show="true">修改</el-button>
              <el-button v-else link type="primary" size="small" @click="Addimmunity()">保存</el-button>
              <el-button v-if="isUpinpute !== $index" link type="primary" size="small" @click="Deletes(row)"
                v-show="true">删除</el-button>
              <el-button v-else link type="primary" size="small" @click="isUpinpute = -1" v-show="true">取消</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="isdig" style="width: 900PX;height: 35px; background-color: #FFFFFF;">
        <form :v-model="newRecord">
          <el-input style="width: 180PX;float: none;margin-right: 50px;" v-model="newRecord.immunityDay"
            placeholder="饲养天数" show-word-limit maxlength="5"></el-input>
          <el-input style="width: 180PX;float: none;margin-right: 50px;" v-model="newRecord.immuniTyype"
            placeholder="保健方式" show-word-limit maxlength="30"></el-input>
          <el-input style="width: 180PX;float: none;margin-right: 50px;" v-model="newRecord.immunityMethod"
            placeholder="保健方法" show-word-limit maxlength="30"></el-input>
          <el-button link type="primary" size="small" @click="Addimmunity()">保存</el-button>
          <el-button link type="primary" size="small" @click="isdig = false" v-show="true">取消</el-button>
        </form>
      </div>
    </div>
  </div>
  <!-- 动检证 -->
  <div style="margin-bottom: 40px;">
    <div>
      <span style="color: #3791EB;">动检证</span>
      <hr>
      <el-upload v-model:file-list="fileList" action="https://localhost:7281/api/UploadTuPian" list-type="picture-card"
        :on-preview="handlePictureCardPreview" @change="addTestModel.pTyper = 2" :on-remove="handleRemove"
        :on-success="handleAvatarSuccess" class="aaimg">
        <el-icon>
          <Plus />
        </el-icon>
      </el-upload>
      <el-dialog v-model="dialogVisible" class="imgyl">
        <img w-full :src="dialogImageUrl" alt="Preview Image" class="imgyll" />
      </el-dialog>
    </div>
  </div>
  <!--企业信息 -->
  <div style="margin-bottom: 40px;">
    <div>
      <span style="color: #3791EB;">企业信息</span>
      <el-button plain style="background-color: #F2F2F2;margin-left: 18px;width: 90px;margin-bottom: 15px;"
        @click="dialogBreedEnter()">设置</el-button>
      <hr>
    </div>
    <div>
      <table>
        <tr>
          <td style="width: 300px;">养殖场 : {{ AddEnterObj.breedName }}</td>
          <td>负责人 : {{ AddEnterObj.breedChargeName }}</td>
        </tr>
        <tr>
          <td>存栏数量 : {{ AddEnterObj.breedNum }}</td>
        </tr>
      </table>
    </div>
    <!-- 企业信息设置弹框 -->
    <div>
      <el-dialog v-model="dialogFormEnter" title="企业信息" width="500" draggable="true">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="AddEnterObj" :rules="ruless" label-width="auto"
          class="demo-ruleForm" :size="formSizeEnter" status-icon>
          <el-form-item label="养殖场" prop="breedName">
            <el-input v-model="AddEnterObj.breedName" show-word-limit maxlength="30" />
          </el-form-item>
          <el-form-item label="负责人" prop="breedChargeName">
            <el-input v-model="AddEnterObj.breedChargeName" show-word-limit maxlength="30" />
          </el-form-item>
          <el-form-item label="存栏数量(只)" prop="breedNum">
            <el-input v-model="AddEnterObj.breedNum" show-word-limit maxlength="5" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitFormEnter(ruleFormRef)">
              保存
            </el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
  <!--企业照片 -->
  <div style="margin-bottom: 40px;">
    <div>
      <span style="color: #3791EB;">企业照片</span>
      <hr>
      <el-upload v-model:file-list="fileListEnter" action="https://localhost:7281/api/UploadTuPian"
        list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemoveEnter"
        :on-success="handleAvatarSuccess" @change="addTestModel.pTyper = 3" class="aaimg">
        <el-icon>
          <Plus />
        </el-icon>
      </el-upload>
      <el-dialog v-model="dialogVisible" class="imgyl">
        <img w-full :src="dialogImageUrl" alt="Preview Image" class="imgyll" />
      </el-dialog>
    </div>
  </div>


</template>

<script setup lang="ts">
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import moment from 'moment';
import { compile, computed, onMounted, reactive, ref, watch } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { useRouter, useRoute } from 'vue-router';
import { useCounterStore } from '@/stores/counter';
import DepData from '@/stores/departmentData'
import { Delete, Plus } from '@element-plus/icons-vue'
import type { UploadProps, UploadUserFile } from 'element-plus'
//pini保存
const store = useCounterStore();
//跳转
const router = useRouter();
//跳转传参
const route = useRoute();

//#region 企业图片
//储存企业图片列表
const fileListEnter = ref<UploadUserFile[]>([])


//企业图片显示
const imgshowEnter = () => {
  axios.get(`https://localhost:7070/api/Trace/GetTest?PTyper=3&TraceaBatch=${store.ccTrace.traceaBatch}&TraceaIsDelete=false`).then(res => {
    fileListEnter.value = res.data.data
  })
}


//删除企业图片
const handleRemoveEnter: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  // console.log(uploadFile, "获取删除数据uploadFile")
  // console.log(uploadFiles, "获取删除数据uploadFiles")
  axios.get(`https://localhost:7281/api/Trace/DeleteTest?Url=${uploadFile.url}&PTyper=3&TraceaBatch=${store.ccTrace.traceaBatch}`).then(res => {
    if (res.data.code == 204) {
      ElMessage.success("图片删除成功")
    } else if (res.data.code = 205) {
      ElMessage.error("图片删除失败")
    } else {
      ElMessage.error("图片删除出现错误")
    }
  })
}

//#endregion

//#region  企业信息
//添加企业表单
const AddEnterObj = reactive({
  "enterId": null,              //主键
  //////////////////////养殖企业信息////////////////////////////
  "breedName": "",            //养殖场
  "breedChargeName": "",      //负责人
  "breedNum": "",             //存栏数量
  //////////////////////屠宰企业信息////////////////////////////
  "slaughterName": null,        //公司名称
  "slaughterAdder": null,       //公司地址
  "slaughterProvinceId": null,  //省份
  "slaughterCityId": null,      //市
  "slaughterCountyId": null,    //县
  "slaughterCreteTime": null,   //成立时间
  //////////////////////深加工企业信息////////////////////////////
  "deepName": null,             //深加工公司名称
  "deepNumber": null,           //生产许可证号
  //////////////////////公共字段////////////////////////////
  "traceaBatch": store.ccTrace.traceaBatch,          //生产批次
  "traceaIsDelete": false     // 逻辑删除 false 未删除  true 删除
})


const dialogFormEnter = ref(false) //对话框开关

const ruleFormRefEnter = ref<FormInstance>()
const formSizeEnter = ref<ComponentSize>('default')
//企业效验
const ruless = reactive<FormRules>({
  // 养殖场
  //   1、必填项
  //   2、允许输入任意字符（主要为中文、字母）
  //   3、不允许输入非特殊字符（如逗号、问号等）
  //   4、最多支持输入 30 位字符
  breedName: [
    { required: true, message: '必填项', trigger: 'blur' },
    { min: 0, max: 30, message: '最多支持输入 30 位字符', trigger: 'blur' },
    {
      pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]+$/, message: '不允许输入非特殊字符（如逗号、问号等）', trigger: 'blur'
    },
  ],
  //负责人
  breedChargeName: [
    { required: true, message: '必填项', trigger: 'blur' },
    { min: 0, max: 30, message: '最多支持输入 30 位字符', trigger: 'blur' },
    {
      pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]+$/, message: '不允许输入非特殊字符（如逗号、问号等）', trigger: 'blur'
    },
  ],
  //存栏数量(只)
  breedNum: [
    { required: true, message: '必填项', trigger: 'blur' },
    // { min: 0, max: 5, message: '最多支持输入 5 位字符', trigger: 'blur' },
    {
      pattern: /^\d+$/, message: '请输入数字', trigger: 'blur'
    }
  ],
})

//打开企业对话框
const dialogBreedEnter = () => {
  //清空操作

  dialogFormEnter.value = true //打开对话框
}

//添加企业信息
const submitFormEnter = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      axios.post('https://localhost:7281/api/Trace/AddUpdateEnterprise', AddEnterObj).then(res => {
        if (res.data.code === 220) {
          //设置成功
          ElMessage.success("设置成功")
        } else if (res.data.code === 221) {
          //设置失败
          ElMessage.success("设置失败")
        } else {
          //添加失败
          ElMessage.error("设置出错")
        }
        dialogFormEnter.value = false //关闭对话框
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

//显示反填企业信息
const showEnter = () => {
  axios.get(`https://localhost:7070/api/Trace/GetEnterprise?TraceaBatch=${store.ccTrace.traceaBatch}`).then(res => {
    console.log(res.data.data, "反填的饲养信息")
    AddEnterObj.breedName = res.data.data[0].breedName
    AddEnterObj.breedChargeName = res.data.data[0].breedChargeName
    AddEnterObj.breedNum = res.data.data[0].breedNum
  })
}


//#endregion

//#region 动检证信息
//预览开关
const dialogVisible = ref(false)
//预览图片路径
const dialogImageUrl = ref('')

//添加请求表单
const addTestModel = reactive({
  "url": "",
  "pTyper": 0,
  "traceaBatch": store.ccTrace.traceaBatch,
  "traceaIsDelete": false
})

//添加动检证图片请求
const addTest = () => {
  axios.post('https://localhost:7281/api/Trace/AddTest', addTestModel).then(res => {
    if (res.data.code == 212) {
      // 添加成功
      ElMessage.success(res.data.msg)
    }
  })
}

//储存动检证图片列表
const fileList = ref<UploadUserFile[]>([])

//显示动检证图片
const imgshow = () => {
  axios.get(`https://localhost:7070/api/Trace/GetTest?PTyper=2&TraceaBatch=${store.ccTrace.traceaBatch}&TraceaIsDelete=false`).then(res => {
    fileList.value = res.data.data
  })
}


//删除动检证图片
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  // console.log(uploadFile, "获取删除数据uploadFile")
  // console.log(uploadFiles, "获取删除数据uploadFiles")
  axios.get(`https://localhost:7281/api/Trace/DeleteTest?Url=${uploadFile.url}&PTyper=2&TraceaBatch=${store.ccTrace.traceaBatch}`).then(res => {
    if (res.data.code == 204) {
      ElMessage.success("图片删除成功")
    } else if (res.data.code = 205) {
      ElMessage.error("图片删除失败")
    } else {
      ElMessage.error("图片删除出现错误")
    }
  })
}

//预览图片
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}

//#region 图片增加

//图片添加操作
//定义图片存放变量
const imageUrl = ref('')

//上传后获取数据url
const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  // imageUrl.value = URL.createObjectURL(uploadFile.raw!)
  addTestModel.url = response.imgss;
  console.log(response, '返回的图片数据')
  console.log(addTestModel.url, "上传图片获取路径")
  addTest()
}

//图片上传前操作
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  // if (rawFile.type !== 'image/jpeg') {
  //   ElMessage.error('Avatar picture must be JPG format!')
  //   return false
  // } else if (rawFile.size / 1024 / 1024 > 2) {
  //   ElMessage.error('Avatar picture size can not exceed 2MB!')
  //   return false
  // }
  return true
}

//#endregion



//#endregion

//#region 保健信息

//添加保健信息
//添加表单
const newRecord = reactive({
  "immunityId": null,
  "immunityDay": '',
  "immuniTyype": "",
  "immunityMethod": "",
  "traceaBatch": store.ccTrace.traceaBatch,
  "traceaIsDelete": false
})

//显示新增行状态
const isdig = ref(false)

//修改显示编辑行状态
const isUpinpute = ref(-1)

// 实现新增行功能
const addRow = () => {
  isdig.value = true //显示新行
  newRecord.immunityDay = ""
  newRecord.immuniTyype = ""
  newRecord.immunityMethod = ""
}

//添加/修改保健事件
const Addimmunity = () => {
  if (!newRecord.immunityDay) {
    ElMessage.error("饲养天数不可为空")
    return;
  }

  if (!newRecord.immuniTyype) {
    ElMessage.error("保健方式不可为空")
    return;
  }
  if (!newRecord.immunityMethod) {
    ElMessage.error("保健方法不可为空")
    return;
  }

  //判断 isupstatus == false为添加
  if (isupstatus.value == false) {
    axios.post('https://localhost:7281/api/Trace/AddImmunity', newRecord).then(res => {
      if (res.data.code == 212) {
        //添加成功
        ElMessage.success(res.data.msg);
        isdig.value = false
        showimmunity()
      } else {
        ElMessage.success("添加出错");
      }
      isdig.value = false //显示新行
      showimmunity();
    })
  }
  // 判断 isupstatus == trun 为修改
  if (isupstatus.value == true) {
    axios.put(`https://localhost:7281/api/Trace/UpdateImmunity`, newRecord).then(res => {
      if (res.data.code == 206) {
        //修改成功
        ElMessage.success(res.data.msg)
      } else if (res.data.code == 206) {
        //修改失败
        ElMessage.error(res.data.msg)
      } else {
        ElMessage.error("修改出错")
      }
      showimmunity();
    })
    isupstatus.value = false //修改状态
    isdig.value = false //显示新行
    isUpinpute.value = -1 //修改行去除文本框
    showimmunity();
  }

}

//保健信息数据源
const healthRecords = ref([])

//显示保健数据
const showimmunity = () => {
  axios.get(`https://localhost:7070/api/Trace/GetImmunity?TraceaBatch=${store.ccTrace.traceaBatch}`).then(res => {
    healthRecords.value = res.data.data
  })
}

//修改状态属性
const isupstatus = ref(false)

//保健信息修改
const Updates = (row: any, index: any) => {
  console.log(index, "row.index获取值")
  //修改显示编辑行状态
  isUpinpute.value = index
  console.log(row, "修改传原值")
  // isdig.value = true //显示新行
  newRecord.immunityId = row.immunityId
  newRecord.immunityDay = row.immunityDay
  newRecord.immuniTyype = row.immuniTyype
  newRecord.immunityMethod = row.immunityMethod
  isupstatus.value = true
}

//保健信息删除
const Deletes = (row: any) => {
  newRecord.immunityId = row.immunityId
  axios.delete(`https://localhost:7281/api/Trace/DeleteImmunity?ImmunityId=${row.immunityId}`).then(res => {
    if (res.data.code == 204) {
      //删除成功
      ElMessage.success(res.data.msg)
    } else if (res.data.code == 205) {
      //删除失败
      ElMessage.success(res.data.msg)
    } else {
      ElMessage.success("删除出错")
    }
    showimmunity()
  })
}

//#endregion

//#region 养殖信息设置

const dialogFormBreed = ref(false) //对话框开关
const formLabelWidth = '140px'

const ruleFormRef = ref<FormInstance>()
const formSize = ref<ComponentSize>('default')
//养殖效验
const rules = reactive<FormRules>({
  // 品牌
  //   1、必填项
  //   2、允许输入任意字符（主要为中文、字母）
  //   3、不允许输入非特殊字符（如逗号、问号等）
  //   4、最多支持输入 30 位字符
  breedVariety: [
    { required: true, message: '必填项', trigger: 'blur' },
    { min: 0, max: 30, message: '最多支持输入 30 位字符', trigger: 'blur' },
    {
      pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]+$/, message: '不允许输入非特殊字符（如逗号、问号等）', trigger: 'blur'
    },
  ],
  //来源
  breedSource: [
    { required: true, message: '必填项', trigger: 'blur' },
    { min: 0, max: 30, message: '最多支持输入 30 位字符', trigger: 'blur' },
    {
      pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]+$/, message: '不允许输入非特殊字符（如逗号、问号等）', trigger: 'blur'
    },
  ],
  //饲养天数
  breedDay: [
    { required: true, message: '必填项', trigger: 'blur' },
    // { min: 0, max: 5, message: '最多支持输入 5 位字符', trigger: 'blur' },
    {
      pattern: /^\d+$/, message: '请输入数字', trigger: 'blur'
    }
  ],
  //饲料品牌
  breedBrand: [
    { required: true, message: '必填项', trigger: 'blur' },
    { min: 0, max: 30, message: '最多支持输入 30 位字符', trigger: 'blur' },
    {
      pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]+$/, message: '不允许输入非特殊字符（如逗号、问号等）', trigger: 'blur'
    },
  ],
  //饲养负责人
  breedOPeratorName: [
    { required: true, message: '必填项', trigger: 'blur' },
    { min: 0, max: 30, message: '最多支持输入 30 位字符', trigger: 'blur' },
    {
      pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]+$/, message: '不允许输入非特殊字符（如逗号、问号等）', trigger: 'blur'
    },
  ],
  //出栏日期
  breedCrateTime: [
    { required: true, message: '必填项', trigger: 'blur' },
  ],
})

//打开养殖对话框
const dialogBreed = () => {
  //清空操作

  dialogFormBreed.value = true //打开对话框
}


//添加对象
const AddformBreed = reactive({
  "breedVariety": "",       //品种
  "breedSource": "",      //来源
  "breedDay": '',         //饲养天数
  "breedBrand": "",       //饲料品牌
  "breedOPeratorName": "",//饲养负责人
  "breedCrateTime": "",//出栏日期
  "traceaBatch": store.ccTrace.traceaBatch,//生产批次
  "traceaIsDelete": false     //逻辑删除 false 未删除  true 删除
})

//添加养殖信息
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      axios.post('https://localhost:7281/api/Trace/AddBreed', AddformBreed).then(res => {
        if (res.data.code === 220) {
          //设置成功
          ElMessage.success("设置成功")
        } else if (res.data.code === 221) {
          //设置失败
          ElMessage.success("设置失败")
        } else {
          //添加失败
          ElMessage.error("设置出错")
        }
        dialogFormBreed.value = false //关闭对话框
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

//显示反填饲养信息
const showBreed = () => {
  axios.get(`https://localhost:7070/api/Trace/GetBreed?TraceaBatch=${store.ccTrace.traceaBatch}`).then(res => {
    console.log(res.data.data, "反填的饲养信息")
    AddformBreed.breedVariety = res.data.data[0].breedVariety
    AddformBreed.breedSource = res.data.data[0].breedSource
    AddformBreed.breedDay = res.data.data[0].breedDay
    AddformBreed.breedBrand = res.data.data[0].breedBrand
    AddformBreed.breedOPeratorName = res.data.data[0].breedOPeratorName
    AddformBreed.breedCrateTime = res.data.data[0].breedCrateTime
    AddformBreed.traceaBatch = res.data.data[0].traceaBatch
  })
}

//#endregion


onMounted(() => {
  //显示反填企业信息
  showEnter();
  //反填饲养信息
  showBreed();
  //反填保健信息
  showimmunity();
  //质检显示图片
  imgshow()
  //企业图片显示
  imgshowEnter()
})

</script>

<style scoped></style>

<!-- 上传图片样式 -->
<style>
.avatar-uploader .el-upload {
  margin-top: 15px;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);

}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 50px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
  background-color: #F2F2F2;
}

hr {
  margin: 7px 0;
}
</style>